<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-31 10:18:30
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-06 11:15:38
 * @FilePath: \nien-vue3-admin\src\views\BusinessConfiguration\sellPriceManagement\components\EditDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-model="visible"
    width="960px"
    :title="`${title}数据`"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-tabs v-if="title === '修改'" v-model="activeName" @tab-change="saveLoading = false">
      <el-tab-pane label="基础数据" name="basicData"></el-tab-pane>
      <el-tab-pane label="国家分区" name="nationalPart"></el-tab-pane>
      <el-tab-pane label="重量模板" name="weightTemp"></el-tab-pane>
    </el-tabs>
    <div v-else class="title">基础数据</div>
    <component :is="componentsMap[activeName]" ref="componentRef" :basic-info="basicInfo" />
    <template #footer>
      <div>
        <el-button type="info" @click="cancel">取消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, defineEmits } from 'vue'
import basicData from './BasicData.vue'
import nationalPart from './NationalPart.vue'
import weightTemp from './WeightTemp.vue'

interface componentsExpose {
  // open:(option: any) => void;
  save:(type?:string) => Promise<any>
}

type componentsList = 'basicData' | 'nationalPart' | 'weightTemp'

const componentsMap = {
  basicData,
  nationalPart,
  weightTemp,
}

const emits = defineEmits(['success'])
const visible = ref<boolean>(false)
const saveLoading = ref<boolean>(false)

const title = ref('修改')
const basicInfo = ref({})

const componentRef = ref<componentsExpose>()
const activeName = ref<componentsList>('basicData')

const cancel = () => {
  visible.value = false
}
const save = () => {
  saveLoading.value = true
  switch (activeName.value) {
    case 'basicData':
      componentRef.value.save(title.value)
      .then((res) => {
        if (res) {
          emits('success')
          if (title.value === '新增') {
            cancel()
          }
        }
      }).finally(() => {
        saveLoading.value = false
      })
      break
    case 'nationalPart':
      componentRef.value.save().finally(() => {
        saveLoading.value = false
      })
      break
    case 'weightTemp':
      componentRef.value.save().finally(() => {
        saveLoading.value = false
      })
      break
    default:
      ((e:never):never => { throw new Error(`Unexpected object: ${ e }`) })(activeName.value)
  }
}

const open = (t = '修改', row) => {
  activeName.value = 'basicData'
  title.value = t
  basicInfo.value = row
  visible.value = true
}

defineExpose({
  open,
})

</script>
<style lang="less" scoped>
.title{
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #010D19;
  line-height: 20px;
  margin-bottom: 16px;
}
</style>